<script setup lang="ts">
import type { ArticleVO } from '@/types/vo/ArticleVO'
import { getArticleDetail } from '@/apis/article'
import dayjs from 'dayjs'
import {
  getIsLiked,
  getLikedCountService,
  likeClickService,
} from '@/apis/front/liked'
import { debounce } from 'min-dash'

const route = useRoute()

const articleId = ref()
const article = ref<ArticleVO>()

const getDetail = async () => {
  const res = await getArticleDetail(articleId.value)
  article.value = res.data.data
}
const isLiked = ref(false)
const checkIsLiked = async (articleId: number) => {
  const res = await getIsLiked(articleId)
  isLiked.value = res.data.data
}

const likeCount = ref(0)
const getLikedCount = async (articleId: number) => {
  const res = await getLikedCountService(articleId)
  likeCount.value = res.data.data
}

// 点赞
const likeClick = debounce(async () => {
  await likeClickService({
    articleId:articleId.value,
    status: isLiked.value ? 1 : 0
  })
  await getIsLiked(articleId.value)
  await getLikedCount(articleId.value)
}, 1000)
const click = () => {
  // 修改点赞状态
  isLiked.value = !isLiked.value
  likeCount.value = isLiked.value ? likeCount.value + 1 : likeCount.value - 1
  likeClick()
}

const loading = ref(false)
const userStore = useUserStore()
onMounted(async () => {
  articleId.value = route.query.articleId || 0
  try {
    loading.value = true
    await getDetail()
    await checkIsLiked(articleId.value)
    await getLikedCount(articleId.value)
  } finally {
    loading.value = false
  }
})

</script>

<template>
  <div  class="w-full h-full flex gap-20px">
    <div v-if="!loading" class="flex-1 bg-white px-20px overflow-auto pb-20px">
      <h1 class="c-#252933">
        {{ article?.articleName }}
      </h1>
      <div class="flex items-center c-#515767 gap-20px">
        <div class="">{{ article?.author }}</div>
        <div class="">
          {{ dayjs(article?.createdTime).format('YYYY-MM-DD') }}
        </div>
        <div class="flex gap-5px ml-auto">
          <n-tag
            v-for="item in article?.labelList"
            :key="item.id"
            :bordered="false"
            :type="'info'"
          >
            {{ item.labelName }}
          </n-tag>
        </div>
      </div>
      <div class="content mt-20px overflow-auto">
        <div v-html="article?.content"></div>
<!--        <MdComponent :markdown-text="article?.content || ''" />-->
      </div>
      <div
        class="flex gap-5px items-center font-size-12px"
        :color="isLiked ? '#4680f0' : 'gray'"
        @click="click"
        v-if="article?.authorId !== userStore.userInfo?.id"
      >
        <i-custom-liked width="14px" height="14px" class="cursor-pointer" />
        <div v-if="likeCount">({{ likeCount }})</div>
      </div>
    </div>
    <div class="flex-1 bg-white px-20px" v-else>
      <n-skeleton text :repeat="20" />
    </div>
    <div class="h-full flex flex-col gap-5px w-250px">
      <OtherUserCard :author-id="article?.authorId"/>
      <RecommendCard />
    </div>
  </div  >

</template>

<style scoped>
.content{
  border-top: 2px solid #e7e8ea;
}
</style>
